<script setup lang='ts'>
import { ref } from 'vue'
import { areaList } from '@vant/area-data';
//是否显示弹出层
const show = ref(false);
//默认选中地址的编号
const chosenAddressId = ref('1');
//地址编辑的初始显示值
const addressInfo = ref({})
//TODO 地址信息
const list = ref([
    {
        id: '1',
        name: '张三',
        tel: '13000000000',
        address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
        isDefault: true,
    },
    {
        id: '2',
        name: '李四',
        tel: '1310000000',
        address: '浙江省杭州市拱墅区莫干山路 50 号',
    },
])
//新增地址按钮
const onAdd = () => {
    //显示弹出层
    show.value = true;
    console.log("点击的添加触发的函数");

};
//编辑按钮
const onEdit = (item, index) => {
    show.value = true;
    console.log("点击编辑触发的函数", item, index);
    addressInfo.value = item;
};
//新增地址按钮
const onSave = (options) => {
    console.log("点击的保存的函数",options);
};
//删除按钮
const onDelete = (options) => {
    console.log("点击的删除的函数",options);
};
//TODO 地址详情页面

</script>
<template>
    <div class="address">
        <!-- TODO 模板头部 -->
        <van-nav-bar title="晨锋电商" left-text="返回" left-arrow @click-left="$router.go(-1)" />
        <!-- TODO 模板地址 -->
        <van-address-list v-model="chosenAddressId" :list="list" default-tag-text="默认" @add="onAdd" @edit="onEdit" />
        <!-- TODO 地址详情 -->

        <van-popup v-model:show="show"  position="bottom">
            <!-- 在弹出层里面展示出来 -->
            <van-address-edit :address-info="addressInfo" :area-list="areaList" show-postal show-delete show-set-default show-search-result
            :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave"
            @delete="onDelete" />
        </van-popup>
        
    </div>
</template>
<style scoped lang='scss'>

</style>